@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
}

#vapp {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}


.photo {
	width: 100vw;
	position: relative;
	height: calc(100vw*9/16);
	height: -webkit-calc(100vw*9/16);
	height: -moz-calc(100vw*9/16);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.photo img {
	width: 100%;
	height: 100%;
}

/*课程名称*/

.photo .couName {
	width: 100%;
	line-height: 22px;
	color: #333;
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding: 10px;
	background-color: rgb(204, 204, 204, 0.3);
	z-index: 9;
}

#Context {
	margin-right: 10px;
	margin-bottom: 60px;
	margin-left: 10px;
	height: auto;
}

.info {
	color: #999;
	margin: 5px;
	font-size: 14px;
}

.info i:before {
	font-size: 10px;
	margin-right: 3px;
}

/*关注数*/

.viewnum:before {
	content: "\e627";
	font-family: "iconfont";
}

/*学习数*/

.studynum:before {
	content: "\e621";
	font-family: "iconfont";
}

/*免费*/

.free:before {
	content: "\e645";
	font-family: "iconfont";
}

/*收费图标*/

.money-ico:before {
	content: "\e625";
	font-family: "moneyico";
}

/*选项卡*/

.control {
	height: 40px;
	width: 100%;
}

.control .control-item {
	width: auto;
	padding-right: 20px;
	padding-left: 20px;
	display: block;
	float: left;
}

.control .active {
	border-bottom-width: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #09F;
}

.control-content>div {}

/*主讲教师*/

#teacher {
	margin-bottom: 10px;
	display: table;
	width: 100%;
}

.thPhoto {
	width: 20%;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 6px;
	border: 2px solid #CCC !important;
	float: left;
	display: block;
	background-size: cover !important;
}

.thRight {
	float: left;
	margin-left: 5%;
	width: 55%;
}

.thName {
	margin-top: 10px;
	margin-bottom: 10px;
}

.thSign {
	color: #666;
	line-height: 25px;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

/*课程内容*/

.introBox {
	width: 100% !important;
}

.introBox img {
	width: 100% !important;
	height: 100%;
}

.introBox, .introBox * {
	font-size: 16px !important;
	line-height: 22px !important;
}

/*章节*/

.outlines {
	margin: 5px 10px 5px 15px;
}

.olitem {
	position: relative;
	overflow: hidden;
	padding: 5px 15px;
	transform-style: preserve-3d;
}

.olitem a {
	color: #333;
}

.nofinish {
	position: absolute;
	top: 16px;
	background-color: rgba(0, 0, 0, .10);
	color: #666;
	font-size: 10px;
	border-radius: 100px;
	line-height: 1;
	display: inline-block;
	padding: 3px 6px;
	transform: translateY(-50%);
}

/*底部*/

.cour-footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	z-index: 9999;
	opacity: .9;
	--filter: alpha(opacity=90);
	_bottom: 0px;
	_width: 100%;
	_position: absolute;
	background-color: #fff;
	box-shadow: 0px -1px 2px rgba(0, 0, 0, .3);
}

.couBtnBox, .couBtnBox a {
	text-align: center;
	color: #fff;
	display: block;
	font-size: 18px;
	--text-shadow: 0px 0px 20px rgba(255, 255, 255, 1);
	letter-spacing: 10px;
}

.couBtn {
	background-color: #1081DC;
	height: 100%;
	--background: linear-gradient(rgba(17, 142, 234, 0.9), rgba(17, 142, 234, 1));
}

.btn1 {
	width: 40%;
	float: left;
}

.btn2 {
	width: 60%;
	float: left;
}

/*开始学习的按钮*/

.couBtnBox .study {
	background-color: #093;
	--background: linear-gradient(rgba(34, 139, 34, 0.8), rgba(34, 139, 34, 1));
	background: linear-gradient(rgba(59, 172, 106, 0.9), rgba(59, 172, 106, 1));
}

/*当课程试用时，有两个按钮*/

.btnStart {
	float: left;
	width: 60%;
	margin-right: 2%;
	background-color: #090;
}

.btnBuy {
	float: left;
	width: 38%;
}